<template>
	<view class="container">
		<view class="module-block">
			<view class="linkman-info info-block">
				<view class="title">司机信息</view>
				<view class="group">
					<view class="group__item">
						<view class="label">真实姓名</view>
						<input class="input-text" type="text" name="truename" v-model="driverInfo.truename" placeholder="必填" placeholder-class="input-placeholder">
					</view>
					<view class="group__item">
						<view class="label">手机号码</view>
						<input class="input-text" type="number" name="phone" v-model="driverInfo.phone" placeholder="必填" placeholder-class="input-placeholder">
					</view>					
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<footer-fixed-bar :isShadow="false" :isBackground="false">
			<view class="footer-alone-btn-default">
				<block>
					<button @click="toApply" class="text btn">成为司机</button>
				</block>
			</view>
		</footer-fixed-bar>
	</view>
</template>

<script>
	import {apiUrl} from '@/api/base.js'
	export default {
		data() {
			return {
				driverInfo:{
					truename:'',
					phone:''
				}
			}
		},
		methods: {
			toApply(){
				uni.request({
					header: {
						'Content-Type': 'application/json'
					},
					url: apiUrl + "addons/car/driver/apply",
					data: {
						user_id:uni.getStorageSync("userInfo").user_id,
						truename:this.driverInfo.truename,
						phone:this.driverInfo.phone
					},
					dataType:'json',
					method: "POST",
					success: (res) => {
						if(res.data.data){
							uni.showModal({
							    title: '温馨提示',
							    content: '申请成功，等待管理员审核！',
							    confirmText: "确定",
							    cancelText: "返回",
							    success: function (res) {									
							        if (res.confirm) {							
							            uni.switchTab({
							                     url: '/pages/my/index'
							                });
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						}else{
							uni.showModal({
							    title: '温馨提示',
							    content: '您已申请，等待管理员审核中！',
							    confirmText: "确定",
							    cancelText: "返回",
							    success: function (res) {									
							        if (res.confirm) {							
							            uni.switchTab({
							                     url: '/pages/my/index'
							                });
							        } else if (res.cancel) {
							            uni.switchTab({
							                     url: '/pages/my/index'
							                });
							        }
							    }
							});
						}
					},
					fail: (res) => {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.apply-main {
		padding: 30rpx 24rpx 120rpx;
		font-size: $uni-font-size-base;

		.apply-item {
			color: $uni-text-color;
			font-size: $uni-font-size-base;

			&__pic {
				margin: 30rpx 0;
				background: $uni-bg-color;
				height: 260rpx;
				text-align: center;

				image {
					height: 260rpx;
					width: 260rpx;
				}
			}
		}
	}

	// 底部独立按钮
	.footer-alone-btn-default {
		text-align: center;
		padding: 0 25rpx 22rpx;
		background: $uni-bg-color-grey;

		.text {
			background: $uni-bg-color-primary;
			padding: 30rpx 0;
			color: $uni-text-color-inverse;
			border-radius: $uni-border-radius-lg;
			font-size: $uni-font-size-base;

			&.disabled {
				background: $uni-bg-color-mask;
			}
		}

		.btn {
			background: $uni-bg-color-primary;
			color: $uni-text-color-inverse;
			border-radius: $uni-border-radius-lg;
			font-size: $uni-font-size-base;

			&.disabled {
				background: $uni-bg-color-mask;
			}

			padding: 15rpx 0;
		}
	}
	.module-block{
		padding: 0 25rpx;
		margin-bottom: 20rpx;
	}
	.info-block{
		border-radius: 15rpx;
		background-color: $uni-bg-color;
		.title{
			height: 88rpx;
			padding: 0 20rpx;
			line-height: 88rpx;
			border-bottom: 1rpx solid $uni-border-color;
			font-size: $uni-font-size-lg;
			font-weight: bold;
		}
		.group{
			padding: 0 20rpx;
			font-size: $uni-font-size-base;
		}
		.group__item{
			border-bottom: 1rpx solid $uni-border-color;
			&:last-child{
				border-bottom: none;
			}
		}
	}
	.traveller-info{
		.title,.sub{
			margin-bottom: 20rpx;
			color: #000;
		}
		.title{
			height: auto;
			line-height: normal;
			padding: 24rpx 20rpx 0;
			border-bottom: none;
		}
		.sub{
			padding: 0 20rpx;
			font-size: $uni-font-size-sm;
			.iconfont{
				margin: 0 10rpx 0 6rpx;
				color: $uni-text-color-price;
			}
		}
		.select{
			@extend .displayflex;
			flex-wrap:wrap;
			padding: 20rpx 0 4rpx 20rpx;
			border-top: 1rpx solid $uni-border-color;
			border-bottom: 1rpx solid $uni-border-color;
		}
		.label,.more{
			@extend .alignJustify;
			height: 61rpx;
			min-width: 130rpx;
			margin: 0 20rpx 17rpx 0;
			padding: 0 10rpx;
			border-radius: 8rpx;
			border: 2rpx solid #c0eacc;
			font-size: $uni-font-size-base;
			color: $uni-color-primary;
			&.on{
				background-color: $uni-bg-color-primary;
				color: $uni-text-color-inverse;
				border-color: $uni-color-primary;
			}
		}
		.more{
			width: 216rpx;
			.iconfont{
				position: relative;
				top: 2rpx;
			}
		}
		.group__item{
			position: relative;
			padding: 16rpx 0;
			.name{
				margin-bottom: 10rpx;
				color: #000;
			}
			.number{
				font-size: $uni-font-size-sm;
				color: #777;
			}
			.iconfont{
				position: absolute;
				right: -10rpx;
				top: 50%;
				transform: translateY(-50%);
				color: #a0a0a0;
			}
		}
	}
	.linkman-info{
		.group__item{
			@extend .displayflex;
			height: 88rpx;
			&.textarea{
				height: 164rpx;
			}
		}
		.label{
			width: 236rpx;
			line-height: 88rpx;
		}
		.input-text,.textarea-text{
			@extend .flex1;
			width: 300rpx;
			height: 100%;
			font-size: $uni-font-size-base;
		}
		.textarea-text{
			padding: 20rpx 0;
			line-height: 36rpx;
			box-sizing: border-box;
		}
		.textarea-box{
			.scroll-area{
				height: 100%;
				overflow-y: auto;
			}
		}
		.input-placeholder{
			line-height: 1.571;
		}
	}
	.input-placeholder{
		color: $uni-text-color-placeholder;
	}
</style>
